<script setup>
import { ref } from "vue";

const crewInfo = ref({
    basicInfo: {},
    eduList: [
        {
            id: '1',
            school: 'Jane Doe',
            speciality: '32 Park Road, London',
            graduationDay: '2020-10-09',
            education: 'Haidian'
        },
    ]
});

const columns = [{
    title: '毕业学校 Name of School',
    dataIndex: 'school',
    slotName: 'school'
}, {
    title: '专业 Speciality',
    dataIndex: 'speciality',
    slotName: 'speciality'
}, {
    title: '毕业时间 Year of Graduation',
    dataIndex: 'graduationDay',
    slotName: 'graduationDay'
}, {
    title: '学历 Education',
    dataIndex: 'education',
    slotName: 'education'
}
];

</script>

<template>
    <div class="main-con">
        <div class="form-title">
            <h2 class="title">船员登记表</h2>
            <h3 class="sub-title">SEAFARER'S APPLICATION FORM</h3>
        </div>
        <a-card title="基本情况 PERSONAL PARTICULARS">
            <a-form :model="crewInfo" layout="vertical">
                <a-row :gutter="16">
                    <a-col :span="8">
                        <a-form-item field="zhName" label="中文名 Chinese Name">
                            <a-input v-model="crewInfo.basicInfo.zhName" placeholder="请输入中文名"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item field="birthday" label="出生日期 Date of Birth">
                            <a-date-picker v-model="crewInfo.basicInfo.birthday"></a-date-picker>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item field="height" label="身高 Height">
                            <a-input-number :hide-button="true" v-model="crewInfo.basicInfo.height" placeholder="请输入身高">
                                <template #suffix>
                                    CM
                                </template>
                            </a-input-number>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item field="enName" label="英文名 English Name">
                            <a-input v-model="crewInfo.basicInfo.enName" placeholder="请输入英文名"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item field="placeOfBirth" label="出生地 Place Of Birth">
                            <a-input v-model="crewInfo.basicInfo.placeOfBirth" placeholder="请输入出生地"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item field="weight" label="体重 Weight">
                            <a-input-number :hide-button="true" v-model="crewInfo.basicInfo.weight" placeholder="请输入体重">
                                <template #suffix>
                                    KG
                                </template>
                            </a-input-number>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item field="applyPost" label="申请职务  Position Applied">
                            <a-input v-model="crewInfo.basicInfo.applyPost" placeholder="请输入申请职务"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item field="idCardNo" label="身份证号码 ID Card NO">
                            <a-input v-model="crewInfo.basicInfo.idCardNo" placeholder="请输入身份证号码"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item field="bloodType" label="血型 Blood Type">
                            <a-input v-model="crewInfo.basicInfo.bloodType" placeholder="请输入血型"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item field="contactNumber" label="联系电话 Contact Number">
                            <a-input v-model="crewInfo.basicInfo.contactNumber" placeholder="请输入联系电话"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item field="phone" label="移动电话 Phone Number">
                            <a-input v-model="crewInfo.basicInfo.phone" placeholder="请输入移动电话"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item field="shoesSize" label="鞋码 Shoes Size">
                            <a-input v-model="crewInfo.basicInfo.shoesSize" placeholder="请输入鞋码"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item field="spouseName" label="家属姓名 Spouse Name">
                            <a-input v-model="crewInfo.basicInfo.spouseName" placeholder="请输入家属姓名"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="16">
                        <a-form-item field="addressPostcode" label="联系地址/邮编 Address/Post Code">
                            <a-input v-model="crewInfo.basicInfo.addressPostcode" placeholder="请输入联系地址/邮编"></a-input>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </a-card>
        <a-card title="专业教育情况 MARINE COLLEGE/SCHOOL ATTENDED" style="margin-top: 16px;">
            <a-table :columns="columns" :data="crewInfo.eduList" :pagination="false">
                <template #school="{ record, rowIndex }">
                    <a-input v-model="record.school" />
                </template>
                <template #speciality="{ record, rowIndex }">
                    <a-input v-model="record.speciality" />
                </template>
                <template #graduationDay="{ record, rowIndex }">
                    <a-date-picker v-model="record.graduationDay" />
                </template>
                <template #education="{ record, rowIndex }">
                    <a-input v-model="record.education" />
                </template>

                <template #city="{ record, rowIndex }">
                    <a-select :options="options[record.province] || []" v-model="record.city" />
                </template>
            </a-table>
        </a-card>

    </div>
</template>

<style lang="less">
.arco-card-header {
    background-color: #f0f0f0;
}

.main-con {
    max-width: 1200px;
    margin: 0 auto;
}

.bg-base {
    background-color: rgba(243, 243, 245, 1);
}

.upload-error-con {
    text-align: left;
}

.upload-error-con .title {
    font-size: 14px;
    font-weight: 600;
}

.upload-error-item {
    color: red;
    font-size: 12px;
}


.form-title {
    text-align: center;
    padding: 16px 0;

    .title {
        font-size: 24px;
        font-weight: 600;
    }

    .sub-title {
        font-size: 16px;
        padding-top: 6px;
    }
}
</style>
